<template>
	<view class="windos">
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item>
				<image class="swipe_img"
					src="https://image.zhihuishu.com/zhs/createcourse/course/201706/92eb0f54dfb64128b9fb3a641c00cb38_s1.png"
					mode="aspectFill"></image>
			</van-swipe-item>
			<van-swipe-item>
				<image class="swipe_img"
					src="https://image.zhihuishu.com/zhs/createcourse/course/201901/7f19073e2cd346ba96f52bc33198224a_s1.jpg"
					mode="aspectFill"></image>
			</van-swipe-item>
			<van-swipe-item>
				<image class="swipe_img"
					src="https://image.zhihuishu.com/zhs/createcourse/course/201904/506166f635634ce7aaa655f5cf004f4d_s1.jpg"
					mode="aspectFill"></image>
			</van-swipe-item>
		</van-swipe>
		<view class="content">
			<view class="exam_Box">
				<h3 class="ff">考试</h3>
				<van-tabs v-model="active" animated color="#FFB520">
					<van-tab title="未参与" class="tabs">
						<van-empty v-if="!examListData.length" image="error" description="暂时没有数据" />
						<view class="exam_info" v-for="item in examListData" :key="item.key"
							@click="upTest(item.key,item)">
							<img  class="test_img" src="https://image.zhihuishu.com/zhs/createcourse/course/201904/506166f635634ce7aaa655f5cf004f4d_s1.jpg"/>
							<!-- <image class="test_img"
								src="https://image.zhihuishu.com/zhs/createcourse/course/201904/506166f635634ce7aaa655f5cf004f4d_s1.jpg"
								mode="aspectFit"></image> -->
							<view class="exinfo">
								<h4 class="exam_text">{{item.test_name}}</h4>
								<text class="exam_text exam_text1">科目：{{item.subject_name}} |时长：{{item.time_limit}}分钟</text>
								<text class="exam_text exam_text1">考试是否开始：{{item.status|testStatus}}</text>
								<text class="exam_text exam_text1">结束时间：{{item.exam_deadline}}</text>
								<van-notice-bar class="exam_textinfo" scrollable left-icon="volume-o":text="item.exam_introduction" background="none" />
							</view>
						</view>
					</van-tab>
					<van-tab title="已参与" class="tabs">
						<van-empty v-if="!examEndListData.length" image="error" description="暂时没有数据" />
						<view class="endExam_info" v-for="endItem,index in examEndListData" :key="index">
							<view class="score_info">
								<img class="test_img"src="https://image.zhihuishu.com/zhs/createcourse/course/201904/506166f635634ce7aaa655f5cf004f4d_s1.jpg" alt=""/>
								<view class="exinfo">
									<h4 class="endexam_text">{{endItem.test_name}}</h4>
								</view>
								
							</view>
							<van-collapse v-model="endItem.activeNames">
								<van-collapse-item title="成绩" name="1">
									<text class="score">多选题成绩：{{endItem.selection_score}}分</text>
									<text class="score">单选题成绩：{{endItem.single_score}}分</text>
									<text class="score">判断题成绩：{{endItem.judge_score}}分</text>
									<text class="score">总成绩：{{endItem.sum_score}}分</text>
								</van-collapse-item>
							</van-collapse>
						</view>
					</van-tab>
				</van-tabs>

			</view>
			<view class="topBox">
				<h3 class="ff">排行</h3>
				<van-empty v-if="!topListData.length" image="error" description="暂时没有数据" />
				<van-list v-if="topListData.length" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<van-cell v-for="item,index in topListData" :key="index" class="topList">
						<image class="headerImg" src="https://s1.328888.xyz/2022/06/15/p7282.jpg"></image>
						<view class="list">
							<text>{{item.student_name}}</text>
						</view>
						<view class="sum_score">
							<text>总分：{{item.sum_score}}</text>
							<view class="rank_sum">{{index+1}}</view>
						</view>
					</van-cell>
				</van-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStudentAppTest,studentAppScoreRank,getStudentAppScore} from '@/api/user'
	import {Formatter} from "@/utils/diy_funtion"
	export default {
		data() {
			return {
				examListData: [],
				examEndListData: [],
				topListData: [],
				loading: false,
				finished: false,
				active: null,
				activeNames: []
			}
		},
		onShow() {
			this.getDataList()
		},
		filters: {
			//考试状态
			testStatus: (a) => {
				return '未参与';
			},
			Formatter: Formatter
		},
		//用户下拉
		onPullDownRefresh() {
			this.getDataList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getDataList() {
				getStudentAppTest({
					key: this.$store.getters.student_id
				}).then((res) => {
					// res.data.data
					for (let var1 in res.data.data) {
						if(res.data.data[var1].status){
							res.data.data.splice(var1,1)
						}
						// res.data.data[]
					}
					this.examListData = res.data.data
					getStudentAppScore({
						key: this.$store.getters.student_id
					}).then(ress => {
						for (let index in ress.data.data) {
							ress.data.data[index].activeNames=[]
						}
						this.examEndListData = ress.data.data
					})
				})

				studentAppScoreRank({
					class_name: this.$store.getters.class_name,
					key: this.$store.getters.student_id
				}).then(res => {
					this.topListData = res.data.data
				})
			},
			onLoad() {
				this.getDataList()
				this.loading = false
				this.finished = true
			},
			//进入考试页
			upTest(id, item) {
				if (item.status) {
					this.$toast('考试已结束')
					return false
				}
				this.$dialog.confirm({
					title: `${item.test_name}`,
					message: `时长：${item.time_limit}分钟\n介绍：${item.exam_introduction}\n考试过程不可退出，退出失去考试资格\n是否开始考试？`
				}).then(res => {
					uni.navigateTo({
						url: `../exam/exam?test_id=${id}`
					})
				})
			}
		}
	}
</script>

<style>
	.test_img{
		padding: 20rpx 0 20rpx 20rpx;
		/* height: 100%; */
	}
	.ff {
		padding-left: 10rpx;
		margin: 20rpx 0;
		color: #606266;
		font-weight: bold;
	}
	.tabs{
		max-height: 600rpx;
		overflow-y: scroll;
	}
	.content {
		padding: 0 20rpx;
	}

	.grids {
		display: flex;
		padding-inline-start: 0rpx;
		width: 100%;
		background-color: #ffffff;
	}

	.grods_name {
		color: #303133;
	}

	.grids>li {
		flex: 1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grids>li>image {
		height: 90rpx;
		width: 100%;
	}

	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.my-swipe {
		height: 300rpx;
	}

	.score_info {
		display: flex;
		height: 140rpx;
	}

	.exam_text {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* margin-left: 20rpx; */
		font-size: 6.5rpx;
		color: #303133;
	}

	.endexam_text {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* margin-left: 20rpx; */
		/* font-size: 6.5rpx; */
		color: #303133;
	}

	.swipe_img {
		width: 100%;
		height: 100%;
	}

	.icon {
		width: 36rpx;
		height: 36rpx;
		color: #ffffff;
	}

	.windos {
		/* display: flex; */
		/* flex-direction: column; */
		/* height: 100vh; */
		/* background-color: #efefef; */
	}

	.nav {
		background-color: #007AFF;
		height: 88rpx
	}

	.exinfo {
		/* flex: 1; */
		padding-left: 20rpx;
		display: grid;
		align-content: center;
	}

	.exam_Box {
		width: 100%;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
	}

	.exam_textinfo {
		color: #606266;
		font-size: 6rpx;
		padding: 0;
		height: 40rpx;
		width: 100%;
	}

	.exam_text1 {
		color: #606266;
		font-size: 6rpx;
		padding: 0;
	}

	.bottm {
		background-color: red;
		text-align: center;
		display: flex;
		height: 88rpx;
		font-size: 15px;
		color: #ffffff;
	}

	.nullData {
		width: 100%;
		text-align: center;
		color: #606266;
	}

	.bottm>.bottm_button {
		width: 100%;
	}

	.exam_info,
	image {
		width: 200rpx;
	}

	.endExam_info image {
		/* width: 200rpx; */
		height: 100%;
	}

	.van-list {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.endExam_info {
		width: 100%;
		border-radius: 20rpx;
		margin: 10rpx 0;
		overflow: hidden;
		background-color: #ffffff;
	}

	.dropdown {
		height: 30rpx;
	}

	.exam_info {
		width: 100%;
		height: 160rpx;
		overflow: hidden;
		border-radius: 20rpx;
		margin: 10rpx 0;
		background-color: #ffffff;
		display: flex;
		
	}
	.exam_info uni-image{
		height: 100%;
	}
	.tops {
		position: relative;
		display: flex;
		width: 100%;
		justify-content: space-evenly;
		height: 250rpx;
		align-items: flex-end;
	}

	.top1 {
		transform: translateY(-110rpx)
	}

	.headerImg {
		background-color: #FFFFFF;
		width: 90rpx;
		height: 90rpx;
		border-radius: 30%;
	}

	.headerImg_top {
		border: solid 4rpx #ff8c18;
		border-radius: 90rpx;
	}

	.van-cell__value {
		display: flex;
	}

	.list {
		display: grid;
		align-items: center;
	}

	.list text {
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list text:nth-child(1) {
		color: #6a6a6a;
		font-size: 32rpx;
	}

	.list text:nth-child(2) {
		color: #909399;
		font-size: 24rpx;
	}

	.score {
		display: block;
	}

	.sum_score {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: space-around;
	}

	.rank_sum {
		background-color: #ffffff;
		width: 90rpx;
		height: 90rpx;
		background: url(@/static/img/rankBg.png) no-repeat;
		background-size: cover;
		text-align: center;
		line-height: 90rpx;
		font-size: 34rpx;
		color: white;
	}

	.topList:nth-child(1) .rank_sum {
		background: url(@/static/img/rankBg1.png) no-repeat;
		background-size: cover;
	}

	.topList:nth-child(2) .rank_sum {
		background: url(@/static/img/rankBg2.png) no-repeat;
		background-size: cover;
	}

	.topList:nth-child(3) .rank_sum {
		background: url(@/static/img/rankBg3.png) no-repeat;
		background-size: cover;
	}
</style>
